﻿@using System.Configuration
@using System.IO
@model Siser.Web.Models.Instalacion
@{
    ViewBag.Title = "Plano de instalación";
}
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

@*Validación de usuario, para que no se pueda acceder a la página sin estar logueado *@
@if (@User.Identity.Name == "")
{
    Layout = null;
    <div style="width:800px; font-size:2em; height:500px; text-align:center; margin-top:100px" class="division">
    @Html.ActionLink("Ingrese como usuario válido...", "InicioSesion", "Cuenta")
    </div>
}
else
{
<style>
.area-mapa
{
    background-color:Green;
}
</style>

<h2>Plano de instalación: @Model.Nombre</h2>

<div style="position:relative; width:640px; left: 10px; float: left;">
    <img src="@Path.Combine(ConfigurationManager.AppSettings["PathImagenInstalacion"], Model.NombreImagen)"  alt="@Model.Nombre" width="640" height="480"/>
    @foreach (var equipo in Model.Equipos)
    {
        foreach (var detector in equipo.Detectores)
        {
            <text>
                <a href="@Url.Action("FichaMonitoreo", "Pieza", new { id = detector.Id })">
                    <img src='@Url.Content("~/Content/images/semaforo/verde.png")'      
                            id="@detector.Nombre.Replace(" ", "-").Replace(".", "")"
                            title="@detector.Nombre"
                            alt="@detector.Nombre" 
                            style="position:absolute; top:@detector.PosicionImagenTop; left:@detector.PosicionImagenLeft; border: 0;"/>
                </a>
            </text>
        }
    }
</div>
<div id="informacion-detector">
    @foreach (var equipo in Model.Equipos)
    {
        <text>
            <fieldset id="@String.Concat("fs", equipo.Nombre.Replace(" ", "-").Replace(".", ""))">
                <legend>@equipo.Nombre</legend>
            </fieldset>
        </text>
    }
</div>
<div style="height: 70px"></div>


    
<script type="text/javascript">
    $(document).ready(function () {
        getDataEquiposAsync();

        var interval = setInterval(getDataEquiposAsync, 360000); // Cada 20 minutos

        function getDataEquiposAsync() {
            $.ajax({
                type: "POST",
                url: '@Url.Action("GetEquipos", "Equipo", new { instalacionId = Model.Id })',
                datatype: "json",
                success: function (data) {
                    $(data).each(function (i, equipo) {
                        var fieldSet = $("#fs" + equipo.Nombre.replace(/\s/g, "-").replace(/\./g, ""));

                        $(equipo.Piezas).each(function (i, detector) {
                            var idDetector = detector.Nombre.replace(/\s/g, "-").replace(/\./g, "");
                            var image = $("#" + idDetector);
                            var imagenNivelAlarma = "";

                            $("#cr" + idDetector).remove();

                            if (detector.NivelAlarma == "INVESTIGACION") {
                                image.attr("src", '@Url.Content("~/Content/images/semaforo/amarillo.png")');
                                imagenNivelAlarma = "investigacion.png";
                            }
                            else
                                if (detector.NivelAlarma == "INTERVENCION") {
                                    image.attr("src", '@Url.Content("~/Content/images/semaforo/rojo.png")');
                                    imagenNivelAlarma = "intervencion.png";
                                }
                                else
                                    {
                                        image.attr("src", '@Url.Content("~/Content/images/semaforo/verde.png")');
                                        imagenNivelAlarma = "registro.png";
                                    }


                            var cuadroResumen = "<div id='cr" + idDetector + "' class='cuadro-resumen'><div class='titulo'>" + detector.Nombre + "</div><div class='imagen'><img src='" + '@Url.Content("~/Content/images/alarmas/")' + imagenNivelAlarma + "'/></div></div>";
                            fieldSet.append(cuadroResumen);
                        });
                    });
                }
            });
        }
    });    
</script>

  <div class="division"><a href="javascript:history.back(1)" >Volver</a></div>
}